<template>
  <div id="wrapper">
    <my-header backBtn>
      <div slot="title">
        宝宝信息
      </div>
    </my-header>
    <ul id="middle">
      <li class="middle_li">
        <div class="middle_li_div">
          <img class="icon_left" src="@/../static/img/kidInformation_headPortrait.png" alt="">
          <span>宝宝头像：</span>
        </div>
        <div  style="float: right;padding-right: 10px;margin-top: 10px;">
          <div style="width: 5rem;height: 5rem;margin: auto">
            <img class="weui-grid__label weui-uploader__file" style="width: 5rem;height: 5rem;border-radius:50%;" :src='previewList.url' alt="">
          </div>
          <div style="width: 11rem;margin: auto;height: 5rem">
            <a href="javascript:;" class="file" style="float: left;font-size: 1.3rem;">修改
              <input id="uploaderImage" class="uploader__input" type="file" accept="image/*" :max="1" @change="upload">
            </a>
            <!--<span id="kidHeadPortrait_img_change" >更换</span>-->
            <span class="file" style="float: right;font-size: 1.3rem;" @touchstart="del($event,previewList)">删除</span>
          </div>
        </div>
      </li>
      <li class="middle_li">
        <div class="middle_li_div">
          <img class="icon_left" src="@/../static/img/kidInformation_name.png" alt="">
          <label for="kidName">宝宝姓名：</label>
          <input id="kidName" type="text" v-model="modal.name">
        </div>
      </li>
      <li class="middle_li">
        <div class="middle_li_div">
          <img class="icon_left" src="@/../static/img/kidInformation_schoolbag.png" alt="">
          <span>书包编号：</span>
          <span id="kidGpsCode" style="font-size: 1.5rem" :class="{smallViewport_true_kidGpsCode: isSmallViewport}">{{modal.gpsCode}}</span>
          <span v-show="modal.gpsCode" style="width: 15rem;height: 3.5rem;background: none;border: red solid 1px;border-radius:3rem;color: red;" @click="Dismiss(modal)">解除绑定</span>
          <span v-show="!modal.gpsCode" style="width: 15rem;height: 3.5rem;background: none;border: green solid 1px;border-radius:3rem;color: green;"  @click="bind(modal)">绑定书包</span>
        </div>
      </li>
    </ul>
    <div id="footer" class="weui-dialog__ft">
      <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_default" @click="cancel">取消</a>
      <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_primary sure_color" @click="update">保存</a>
    </div>

    <div v-if="modals.visible">
      <div class="weui-mask"></div>
      <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">绑定智能书包</strong></div>
        <div class="weui-dialog__bd"  style="text-align: left">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell__bd baobaoxingming">
              宝宝姓名：{{modal.name}}
            </div>
            <div class="weui-cell">

              <div class="weui-cell__bd">
                <input class="weui-input"  v-model="modal.gpsCode" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                       placeholder="请输入智能书包编号"/>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-dialog__ft">
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_default" @click="modals.visible=false">取消</a>
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_primary sure_color" @click="subFormFn">下一步</a>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import $ from "jquery";
import wx from "weixin-js-sdk";

export default {
  name: "babynews",
  data() {
    return {
      modals:{
        visible: false,
        form: {
          studentId:'',
          gpsCode: '',
          name:''
        }
      },
      previewList:{
        url:'',
        fileName:''
      },
      modal: {
        id:''
      },
      options: {
        bucket: '',
        region: '',
        folder: '',
        domain: '',
      },
      isSmallViewport: false,
      isLargeViewport: false
    }
  },
  methods: {
    //绑定书包
    subFormFn() {
      let code = this.modal.gpsCode;
      if (!code) {
        this.$weui.topTips('请输入编号');
        return;
      }
      this.modals.visible = false;
      this.$toast.show('提交中...', 'loading');
      this.modal.studentId=this.modal.id;
      this.$http.bindGps(this.modal).then(resp => {
        this.$toast.hide();
        this.$router.go(0);
      }).catch(resp => {
        this.$toast.hide();
      })
    },
    //绑定书包
    bind(rs){
      Object.assign(this.modals, {
        visible: true,
        form: {
          studentId: rs.id,
          gpsCode: '',
          name:rs.name
        }
      })
    },
    //解绑书包
    Dismiss(rs){
      this.$weui.dialog({
        title: '解绑智能书包',
        content: '您确定要对'+rs.name+'进行书包解除绑操作吗？' ,
        buttons: [{
          label: '取消',
          type: 'default',
        }, {
          label: '确定',
          type: 'primary',
          onClick: () => {
            this.$toast.show('提交中...', 'loading');
            this.$http.unbindGps({studentId:rs.id,gpsCode:rs.gpsCode,gpsName:rs.name}).then(resp => {
              this.$toast.hide();
              this.getBobynews();
            }).catch(resp => {
              this.$toast.hide();
            })
          }
        }]
      })
    },
    update(){
      if(this.previewList.fileName){
        this.modal.avatar = this.previewList.fileName;
      }
      let data={
        id:this.modal.id,
        name:this.modal.name,
        avatar:this.modal.avatar,
        status:this.modal.status,
        alarm:this.modal.alarm,
        custom:this.modal.custom,
        sf_whether_to_enable:this.modal.sf_whether_to_enable,
        sf_max:this.modal.sf_max,
        last_modified_by_name:this.modal.last_modified_by_name
      }
      this.$http.fetchPersonaupdatelnoe(data).then(res=>{
        this.$weui.toast(res.msg);
        this.getBobynews();
      });
    },
    previewImage(url) {
      wx.previewImage({
        previewImage: url,
        urls: [url]
      })
    },
    cancel(){
      this.$router.go(-1);
      //location.href = "javascript:history.go(-1);"
    },
    getBobynews(){
      this.$http.fetchPersonalnoe({id:this.modal.id}).then(res=>{
        this.modal = res.data;
        this.previewList.url=this.options.domain+res.data.avatar
      })
    },
    del(e, item) {
      if(this.previewList.url){
        e.preventDefault();
        this.$http.deleteFile({
          fileName: item.fileName
        }).then(resp => {
          this.previewList={};
          this.modal.avatar='';
        })
      }
    },
    upload: function(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.$toast.show('上传中...', 'loading');
      for (let f = 0; f < files.length; f++) {
        let file = files[f];
        let formData = new FormData();
        formData.append('file', file);
        let fileName = this.uuid() + '.jpg';
        formData.append('key', fileName);
        formData.append("token", this.options.token);
        let that = this;
        $.ajax({
          url: this.options.uploadServer,
          type: 'post',
          data: formData,
          processData: false,
          contentType: false,
          success: function(resp) {
            let data = {
              fileName: fileName,
              url: that.options.domain + fileName,
              type: file.type,
            };
            that.previewList=data;
          },
          error: function(resp) {
            that.$weui.toast('上传失败');
          },
          complete: function() {
            that.$toast.hide();
          }
        })
      }
    },
    uuid() {
      let date = new Date();
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }
      return (date.getFullYear() + "" + (date.getMonth() + 1) + S4() + S4() + S4() + S4() + S4() + S4());
    },
    getCosCredential() {
      this.$http.getCosCredential().then(resp => {
        this.options = resp.data;
      });
    }
  },
  mounted() {
    let data = this.$route.query;
    this.modal.id=data.studentId;
    this.getBobynews();
    this.getCosCredential();
    if (window.screen.width <= 360) {
      this.isSmallViewport = true
    }
    if (window.screen.width >= 480) {
      this.isLargeViewport = true
    }
  }
}
</script>

<style scoped>
  #wrapper {
    width: 100%;
    height: 100%;
  }
  #middle {
    display: block;
    list-style-type: none;
    height: calc((100vh - 64px) * 0.915);
  }
  .uploader__input{
    background: none;

  }
  .middle_li {
    display: block;
    border-bottom: solid 1px #F2F2F2;
    font-size: 18px;
    text-align: left;
    height: 15%;
    position: relative;
  }
  #middle li:first-child {
    height: 22.5%;
  }
  .middle_li_div {
    width: 100%;
    position: absolute;
    top: 32.5%;
  }
  .icon_left {
    width: 20px;
    margin: auto 2% auto 3.5%;
  }
  #kidHeadPortrait div span {
    font-size: 16px;
    margin-left: 8%;
    cursor: pointer;
    display: inline-block;
  }
  #kidName {
    height: 32px;
    width: 40%;
    font-size: 18px;
    color: #888888;
    border: solid 1px #888888;
    border-radius: 4px;
    text-indent: 5px;
  }
  #kidGpsCode {
    color: #888888;
  }
  #footer {
    margin-bottom: 0;
  }
  .sure_color {
    color: #06ae56;
  }
  .file {
    position: relative;
    display: inline-block;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 1.5rem;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
  }
  .file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
  }
  .file:hover {
    background: none;
    border-color: #1E88C7;
    color: #004974;
    text-decoration: none;
  }
</style>
